<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue指令</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="d1">
    <!--
        v-if、v-else-if、v-else
    -->
    <p v-if="age < 5">婴儿</p>
    <p v-else-if="age < 18">少年</p>
    <p v-else-if="age < 30">青年</p>
    <p v-else-if="age < 50">中年</p>
    <p v-else>老年</p>

    <!--
        v-for:循环操作
        1.循环数组/集合
    -->
    <ul>
        <li v-for="item in hobbies">{{item}}</li>
    </ul>
    <!-- 2.循环对象数组/集合 -->
    <ul>
        <li v-for="user in users">{{user.id}}--{{user.username}}--{{user.password}}</li>
    </ul>
    <!--
        循环数字
        for(int i = 1; i <= num; i++)
     -->
    <ul>
        <li v-for="i in num">{{i}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#d1",
        data:{
            age: 20,
            hobbies: ['吃饭','睡觉','打豆豆','学Java'],
            users:[
                {
                    id: 1,
                    username: "李小白",
                    password: "123456"
                },
                {
                    id: 2,
                    username: "虞小姬",
                    password: "123456"
                },
                {
                    id: 3,
                    username: "甄小姬",
                    password: "123456"
                },
                {
                    id: 4,
                    username: "蔡文姬",
                    password: "123456"
                }
            ],
            num: 10
        }
    })
</script>
</body>
</html>